<template>
  <el-form ref="loginRefForm" :model="userDetail" label-width="120px">
    <el-form-item label="ID">
      <div class="detail">{{userDetail.id}}</div>
    </el-form-item>

    <el-form-item label="账号">
      <div class="detail">{{userDetail.login_act}}</div>
    </el-form-item>

    <el-form-item label="密码">
      <div class="detail">&nbsp;******</div>
    </el-form-item>

    <el-form-item label="姓名">
      <div class="detail">{{userDetail.name}}</div>
    </el-form-item>

    <el-form-item label="手机">
      <div class="detail">{{userDetail.phone === null ? '无' : userDetail.phone}}</div>
    </el-form-item>

    <el-form-item label="邮箱">
      <div class="detail">{{userDetail.email === null ? '无' : userDetail.email}}</div>
    </el-form-item>

    <el-form-item label="账号未过期">
      <div class="detail">{{userDetail.account_no_expired === 1 ? '是' : '否'}}</div>
    </el-form-item>

    <el-form-item label="密码未过期">
      <div class="detail">{{userDetail.credentials_no_expired === 1 ? '是' : '否'}}</div>
    </el-form-item>

    <el-form-item label="账号未锁定">
      <div class="detail">{{userDetail.account_no_locked === 1 ? '是' : '否'}}</div>
    </el-form-item>

    <el-form-item label="账号是否启用">
      <div class="detail">{{userDetail.account_enabled === 1 ? '是' : '否'}}</div>
    </el-form-item>

    <el-form-item label="创建时间">
      <div class="detail">{{userDetail.create_time}}</div>
    </el-form-item>

    <el-form-item label="创建人">
      <div class="detail">{{userDetail.create_by === null ? '无' : userDetail.create_by}}</div>
    </el-form-item>

    <el-form-item label="编辑时间">
      <div class="detail">{{userDetail.edit_time === null ? '无' : userDetail.edit_time}}</div>
    </el-form-item>

    <el-form-item label="编辑人">
      <div class="detail">{{userDetail.edit_by === null ? '无' : userDetail.edit_by}}</div>
    </el-form-item>

    <el-form-item label="最近登录时间">
      <div class="detail">{{userDetail.last_login_time === null ? '无' : userDetail.last_login_time}}</div>
    </el-form-item>


    <el-upload
        ref="uploadImageRef"
        class="avatar-uploader"
        :action="instance.getUri()+'/api/user/image?id='+id"
        :headers="uploadHeaders"
        :show-file-list="true"
        :auto-upload="false"
        name = "file"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>

    <el-form-item>
      <el-button type="primary" color="green" @click="submitUpload">提交</el-button>
      <el-button type="success" @click="goBack(router)">返 回</el-button>
    </el-form-item>

  </el-form>
</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import instance, {doGet, doPost} from "../http/httpRequest.js";
import {useRoute, useRouter} from "vue-router";
import {getTokenName, goBack, messageTip} from "../util/util.js";
let token = ref();

let uploadHeaders = ref();
//当前路径数据
let route = useRoute();
//当前路由功能
let router = useRouter();
//用户详情
let userDetail = ref({});
//当前路径的id
let id = route.params.id;

//本地头像路径
let imageUrl = ref();
let uploadImageRef=ref();
const loadUser = inject("loadUser");

onMounted(()=>{
  loadUserDetail();
  loadToken();
})
const loadToken=()=>{
  token.value = window.sessionStorage.getItem(getTokenName());
  if (!token.value) { //当 会话储存空间 中没取到值 （没有点击 记住我）
    token.value = window.localStorage.getItem(getTokenName());
  }
  console.log(token);
  uploadHeaders.value = {
    Authorization: token.value
  }
}
const submitUpload = () => {
  if(id == loadUser.value.id) {
    uploadImageRef.value.submit();
  } else {
    messageTip("当前登录者只能为自己提交头像","error");
  }
}

//查询当前用户的详情
 function loadUserDetail(){
   doGet("/api/user/"+id,{}).then((resp)=>{
     console.log(resp);
     if(resp.data.code === 200) {
       userDetail.value = resp.data.data;
     }
   })
 }

</script>

<style scoped>
.detail {
  background-color: #F0FFFF;
  width: 100%;
  padding-left: 15px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>